<template>
  <div id="notice" class="mt24">
    <!-- 无通知 -->
    <!-- <div class="empty">
      <p class="pt157">暂无任何服务通知！</p>
    </div>-->
    <div class="message-list">
      <li class="message-item" v-for="(value,index) in notice" :key="index">
        <div class="message-image">
          <img :src="value.imgUrl" />
        </div>
        <dl class="message-inner">
          <dt class="message-name">{{value.title}}</dt>
          <dd class="message-description">
            <p>
             {{value.content}}
            </p>
          </dd>
        </dl>
        <p class="message-time" style="margin-left: 50%;margin-top: 4%;">{{value.createDate}}</p>
        <div style="margin-left: 83%;margin-top: -2%;">
              <el-link type="primary"  @click="remove(value.id)">清空</el-link>
        </div>
      </li>
    </div>
    <!-- <div class="page">
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      notice: []
    };
  },
   mounted(){
     this.init()
  },
  methods:{
    init(){
      this.axios.post("/userMsg/list",{
        "pageSize":100,
        "currentPage":1,
        "type":5
      }).then((resp)=>{
        this.notice = resp.data.records
      })
    },
    remove(val){
        this.axios.post("/userMsg/remove",{
          "id":val
        }).then((resp)=>{
          if(resp.code ==0){
            this.$message.success(resp.msg)
            this.init()
          }
        })
    }
  }
};
</script>

<style scoped>
#notice {
  min-height: 525px;
}

/* 内容 */
.empty {
  height: 100%;
}

.message-item {
  overflow: hidden;
  border-bottom: 1px dotted #d0d6d6;
  padding: 12px;
  position: relative;
}
.message-image,
.message-inner,
.notice-time {
  display: inline;
  float: left;
}
.message-image {
  position: relative;
}
.message-image img {
  width: 132px;
  height: 132px;
  border: 0;
  /* background-color: deepskyblue; */
}
.message-inner {
  width: 490px;
  overflow: hidden;
  margin-left: 20px;
  /* background-color: deeppink; */
}
.message-name {
  padding: 12px 0;
  font-size: 14px;
  text-align: left;
}
.message-description {
  font-size: 13px;
  line-height: 24px;
}
.message-description p {
  text-align: left;
}
.message-time {
  font-size: 12px;
  color: #c3c3c3;
  padding-left: 130px;
  padding-top: 12px;
}

/* 分页 */
.page {
  margin: 20px 0 40px;
}
</style>